<!--
 * @Author: 273198238 2412069378@qq.com
 * @Date: 2025-03-14 09:54:59
 * @LastEditors: 273198238 2412069378@qq.com
 * @LastEditTime: 2025-03-17 11:34:49
 * @FilePath: \population\src\components\LeftTop.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="top">

        <div class="tab">
            <ul>
                <li v-for="(item, index) in seriesData" :key="index" @click="change(item)">
                    {{ item.name }}
                </li>
            </ul>
        </div>
        <div id="leftTop">
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import * as echarts from 'echarts';
export default {
    data() {
        return {
            seriesData:  [
            {
                name: '北京',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230]
            },
            {
                name: '上海',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330]
            },
            {
                name: '广州',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330]
            },
            {
                name: '深圳',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330]
            }
        ],
            newseriesData: []
        }
    },
    mounted() {
        this.newseriesData.push(this.seriesData[0])
        this.initChart()
        // console.log(this.populationData[0].inflow);
    },
    methods: {
       
        // lastDate() {
            
        // },
        initChart() {
            let series = this.newseriesData.map(item => ({
                name: item.name,
                type: 'line',
                stack: 'Total',
                data: item.data
            }))
          
            let myChart = echarts.init(document.getElementById('leftTop'));
            let option = {
                title: {
                    text: '人口涌入',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:  this.newseriesData.name,
                    textStyle: {
                        color: '#fff'
                    },
                    top: "25px"
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: false,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },


                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                series: series 
            };

            myChart.setOption(option);
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        },
        change(item) {
            if (this.newseriesData.length > 0) {
                this.newseriesData.splice(0, 1);
                
            } else {
                this.newseriesData.push(item);
                // console.log(this.newseriesData.length);

            }   
            this.initChart()
        }
    },
    computed: {
        ...mapState(['populationData'])
    },
    watch: {
        populationData:{
            deep:true,
            // immediate: true,
            handler(newValue, oldValue) {
                if (this.seriesData[0].data.length < 7) {
        this.seriesData[0].data.push(newValue[0].inflow);
        this.seriesData[1].data.push(newValue[1].inflow);

        
        this.seriesData[2].data.push(newValue[2].inflow);
        this.seriesData[3].data.push(newValue[3].inflow);
      
        this.initChart(); 
      }else{
        this.seriesData[0].data.splice(6,1)
        this.seriesData[1].data.splice(6,1)
        this.seriesData[2].data.splice(6,1)
        this.seriesData[3].data.splice(6,1)

        this.seriesData[0].data.push(newValue[0].inflow);
        this.seriesData[1].data.push(newValue[1].inflow);
        this.seriesData[2].data.push(newValue[2].inflow);
        this.seriesData[3].data.push(newValue[3].inflow);
      
        this.initChart(); 
      }
            }
        }
    }
}

</script>

<style lang="less" scoped>
.top {
    width: 100%;
    height: 100%;
}

#leftTop {
    width: 100%;
    height: 100%;
}

.tab {
    color: #fff;
    list-style: none;


    ul {
        display: flex;
        justify-content: space-around;
        width: 80%;
        list-style: none;

        li {
            padding-left: 15px;
            width: 50px;
            background-color: rgba(0, 1, 68, 0.2);
            box-shadow: 1px -2px 6px 2px #4b5b8c;
            cursor: pointer;

        }
    }
}
</style>